<template>
  <view class="container">
    <u-tabs
      class="container__tab u-margin-left-20 u-margin-right-20"
      :list="tabList"
      name="item_name"
      :is-scroll="false"
      :current="current"
      @change="change"
    ></u-tabs>
    <view class="container__content u-margin-20">
      <view class="flex statistic__date container__title">
        <view
          class="statistic__date-text u-padding-20"
          @click="openDatePopup()"
          >{{ date }}</view
        >
        <u-icon name="arrow-down" size="30" @click="openDatePopup()"></u-icon>
      </view>
      <view
        class="flex u-margin-20 align-center u-padding-20"
        v-for="(item, index) in itemList"
        :key="index"
      >
        <view class="" v-if="index == 0">
          <u-image
            width="60rpx"
            height="60rpx"
            src="/static/image/home/icon_rank_first.png"
          ></u-image>
        </view>
        <view class="" v-else-if="index == 1">
          <u-image
            width="60rpx"
            height="60rpx"
            src="/static/image/home/icon_rank_sencond.png"
          ></u-image>
        </view>
        <view class="" v-else-if="index == 2">
          <u-image
            width="60rpx"
            height="60rpx"
            src="/static/image/home/icon_rank_third.png"
          ></u-image>
        </view>
        <view class="" v-else>
          <u-image
            width="60rpx"
            height="60rpx"
            src="/static/image/home/icon_rank_other.png"
          ></u-image>
        </view>
        <view class="flex-1 u-margin-left-10">
          <view class="">
            {{ item.agentName }}
          </view>
          <view class="">
            {{ hideCodeFn(item.mobileNo) }}
          </view>
          <!-- <view class="">
            {{
              item.mobileNo.substring(0, 3) +
              '****' +
              item.mobileNo.substring(item.mobileNo.length - 4)
            }}
          </view> -->
        </view>
        <view class="theme u-font-15">
          {{ item.statData }}
        </view>
      </view>
    </view>
    <u-picker
      mode="time"
      v-model="showDate"
      @confirm="confirm"
      :params="params"
    ></u-picker>
    <!-- <datePopupComponent :showDate="showDate"></datePopupComponent> -->
  </view>
</template>
<script>
import datePopupComponent from './components/datePopupComponent.vue';
export default {
  components: {
    datePopupComponent,
  },
  data() {
    return {
      tabList: [
        {
          item_name: '交易量',
          value: 'TRANS_AMOUNT', //TRANS_AMOUNT
        },
        {
          item_name: '交易笔数',
          value: 'TRANS_COUNT', //TRANS_COUNT
        },
        {
          item_name: '终端总数',
          value: 'SN_COUNT', //SN_COUNT
        },
        {
          item_name: '终端绑定', //SN_BING
          value: 'SN_BING',
        },
        {
          item_name: '终端激活', //SN_ACTIVE
          value: 'SN_ACTIVE',
        },
      ],
      current: 0,
      mDateType: '2', //1天 2月,
      searchParams: {
        statType: 'TRANS_AMOUNT', //list value
        startDate: '', //1 传这个
        endDate: '', //1 传这个
        dateType: '2',
        monthDate: '', //2 传这个
      },
      pageNo: 1,
      pageSize: '10',
      itemList: [],
      params: {
        year: true,
        month: true,
        day: false,
        hour: false,
        minute: false,
        second: false,
      },
      date: '2024年',
      showDate: false,
      year: '',
      month: '',
      day: '',
    };
  },
  onReachBottom() {
    this.onScrolltolower();
  },
  mounted() {
    this.date = this.traversalTime(new Date().getTime());
    this.searchParams.monthDate = this.date;
    let date = this.year + '-' + this.month + '-' + this.day;
    this.searchParams.startDate = date;
    this.searchParams.endDate = date;
    this.getList();
  },
  methods: {
    confirm(e) {
      this.date = e.year + '年' + e.month + '月';
      this.searchParams.monthDate = e.year + '-' + e.month;
      this.pageNo = '1';
      this.itemList = [];
      this.getList();
    },
    change(index) {
      this.current = index;
      this.searchParams.statType = this.tabList[index].value;
      this.pageNo = '1';
      this.itemList = [];
      this.getList();
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    onScrolltolower() {
      this.status = 'loading';
      this.getList();
    },
    getList() {
      // 改变this的指向，保存当前this的引用
      const _that = this;
      this.$zx.user_api
        .agentTopData(this.pageNo, this.pageSize, this.searchParams)
        .then((data) => {
          console.log('agentTopData----->133', data);
          _that.itemList = _that.itemList.concat(data.agentTopDataList);
          if (data.length !== 0) {
            this.status = 'loadmore';
            this.pageNo += 1;
          } else {
            this.status = 'nomore';
          }
        });
    },
    traversalTime(timestamp) {
      //timestamp(时间戳)是整数，否则要parseInt转换
      let time = new Date(timestamp);
      let y = time.getFullYear();
      let m = time.getMonth() + 1;
      let d = time.getDate();
      let h = time.getHours();
      let mm = time.getMinutes();
      let s = time.getSeconds();
      this.year = y;
      this.month = this.addTimes(m);
      this.day = this.addTimes(d);
      return y + '-' + this.addTimes(m);
    },
    addTimes(m) {
      return m < 10 ? '0' + m : m;
    },
    openDatePopup() {
      this.showDate = true;
    },
    // 正则脱敏手机号
    hideCodeFn(IDCode) {
      return IDCode.replace(/(\d{2})(\d{7})(\d{2})/, '$1*******$3');
    },
  },
};
</script>
<style scoped lang="scss">
.container {
  background-color: white;
  height: 100vh;

  &__tab {
    background-color: #f6f6f6 !important;
    border-radius: 20rpx;
  }

  &__content {
    border-radius: 20rpx;
    background-color: white;
    border: 1px solid #f6f6f6;
  }

  &__title {
    border-top-right-radius: 20rpx;
    border-top-left-radius: 20rpx;
    background-color: #f6f6f6;
  }
}
</style>
